
// import { Recharge } from "../../interfaces/recharge.interfaces";
// import { ModalService } from "ng-tools-ui";
// import { RechargeService } from "../../services/recharge.service";
// import { GlobalService } from "../../../../cores/services";
// import { HttpConfig } from "../../../../configs/http.config";

import { Component, OnInit } from '@angular/core';
import { Recharge } from '../../interfaces/recharge.interfaces';
import { ModalService } from 'ng-tui';
import { RechargeService } from '../../services/recharge.service';
import { GlobalService } from '../../../../cores/services';
import { HttpConfig } from '../../../../configs/http.config';

@Component({
    template: `
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">分类添加</h5>
        <button (click)="modal.dismiss()" type="button" class="close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <img *ngIf="!uploading" class="w-100" [src]="banner.scr">
       <!-- <div *ngIf="uploading" style="height:300px;">
            <ts-table-load [display]="uploading" [color]="global.getValue('color')"></ts-table-load>
         </div>-->
        <div class="input-group mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text bg-white">分类名</span>
            </div>
            <input [(ngModel)]="banner.className" type="text" class="form-control">
        </div>
    </div>
    <div class="modal-footer">
        <input tsFile accept="src/*" #inputFile="tsFile" (fileChange)="uploadBanner($event)">
        <button (click)="inputFile.openFileDialog()" type="button" class="btn btn-white">
            <i class="fa fa-fw fa-file-picture-o"></i>选择图片
        </button>
        <button tsBtn loading (submit)="confirmSave($event)" color="success">确认保存</button>
    </div>
</div>`
})
export class ModalComponent {
    // content = '...';
    uploading = false;
    parentId: number;
    banner: Recharge;
    attribute: number;

    constructor(
        public global: GlobalService,
        public modal: ModalService,
        private bannerService: RechargeService
    ) { }

    // uploadBanner(file: File) {
    //     this.uploading = true;
    //     this.bannerService.uploadBanner(file).subscribe(res => {
    //         this.uploading = false;
    //         this.banner.src = HttpConfig.SOURCES_URL + res;
    //     });
    // }
    // confirmSave(btn: any){
    //     this.bannerService.insertBanner(this.banner).subscribe({
    //                     next: () => this.modal.close(),
    //                     complete: () => btn.dismiss()
    //                 });
    // }

    // dismiss() {
    //     this.modal.dismiss();
    // }

    // confirmSave(btn: any) {
    //     (this.banner.id > 0 ? this.bannerService.updateBanner(this.banner) : this.bannerService.insertBanner(this.banner))
    //         .subscribe({
    //             next: () => this.modal.close(),
    //             complete: () => btn.dismiss()
    //         });
    // }

    confirmSave(btn: any) {
        this.banner.parentId = 0;
        this.banner.attribute = 1;
        (this.banner.id > 0
            ? this.bannerService.updateBanner(this.banner)
            : this.bannerService.insertBanner(this.banner)
        ).subscribe({
            next: () => this.modal.close(),
            complete: () => btn.dismiss()
        });
    }

    uploadBanner(file: File) {
        this.uploading = true;
        this.bannerService.uploadBanner(file).subscribe(res => {
            this.uploading = false;
            this.banner.scr = HttpConfig.SERVER_URL + res;
        });
    }
    // confirmSave(btn: any) {
    //     this.bannerService.insertBanner(this.banner).subscribe({
    //                     next: () => this.modal.close(),
    //                     complete: () => btn.dismiss()
    //                 });
    // }
}
